<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>学员信息表</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>

	<body>
		<h1>学员信息表</h1>
		<h5>1804</h5>
		<div class="container">
			<h2>添加</h2>
			<input type="text" id="a" placeholder="名字">
			<select id="b">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			<input id="c" type="text" placeholder="年龄">
			<button id="btn">添加</button>
			<h2>列表</h2>
			<ul class="list">
				<li>名字</li>
				<li>性别</li>
				<li>年龄</li>
			</ul>
			<ul id="list"></ul>
		</div>
		<script>
			function loadXMLDoc() {
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

						var json = JSON.parse(xmlhttp.responseText);
						console.log(json);
						document.querySelector("#list").innerHTML = "";
						for(let i = json.data.length - 1; i >= 0; i--) {
							var li = document.createElement("li");
							var spanName = document.createElement("span");
							spanName.innerHTML = json.data[i].studentName;
							var spansex = document.createElement("span");
							spansex.innerHTML = json.data[i].sex;
							var spanAge = document.createElement("span");
							spanAge.innerHTML = json.data[i].age;
							li.appendChild(spanName);
							li.appendChild(spansex);
							li.appendChild(spanAge);
							document.querySelector("#list").appendChild(li);

						}
						//                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
					}
				};
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
				xmlhttp.send();
			}
			loadXMLDoc();
			document.querySelector("#btn").addEventListener("click", function() {
				var a = document.querySelector("#a").value;
				var b = document.querySelector("#b").value;
				console.log(b);
				var c = document.querySelector("#c").value;
				console.log(c);
				var xmlhttp;
				if(window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest();
				} else {
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
						console.log(xmlhttp.responseText);
					loadXMLDoc()
				}
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + a + "&sex=" + b + "&age=" + c, true);
				xmlhttp.send();
			})
		</script>
	</body>

</html>